<template>
	<div class="mt-4" v-loading="data.mtloading">
		<el-form ref="formRef" :model="data.form" :label-width="language == 'en' ? '120px' : '100px'">
			<el-form-item :label="$t('system.system.domainName')">
				<el-input v-model="data.form.domain_name" class="input_width" />
			</el-form-item>
			<el-form-item :label="$t('system.system.title')">
				<el-input v-model="data.form.title" class="input_width" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item v-for="(item, index) in data.collection" :key="index" :label="item.title">
				<Upload :list="item" :type="1" :url="data.form[index]" @exposeData="expose" :size="2097152"
					:classdiv="'w-96 h-24'" :classimg="'max-w-96 max-h-24'" />
			</el-form-item>

			<el-form-item :label="$t('system.system.status')" v-if="data.config.csr_id == 0">
				<el-switch v-model="data.config.config_switch" :active-value="1" :inactive-value="0"
					active-color="#13ce66" inactive-color="#ff4949" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit" v-if="dtasObj.config_id" v-prmis="'configs_update'">{{
					$t('public.ok') }}</el-button>
				<el-button type="primary" @click="onSubmit" v-prmis="'configs_add'" v-else>{{
					$t('public.ok') }}</el-button>
				<el-button @click="onCancel">{{ $t('public.cancel') }}</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import { getconfig } from '@/api/system';
import Upload from '@/components/Upload/index.vue';
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
let emit = defineEmits(['infoData'])
let dtasObj = ref({})
let data = reactive({
	mtloading: true,
	config: {
		config_name: 'systemInfo',
		config_content: '',
		config_switch: 1,
		csr_id: 0,
		config_id: 0,
	},
	form: {
		domain_name: '',
		title: '',
		machine_logo: '',
		machine_ico: '',
		stop_sell: '',
		machine_maintenance: '',
		remote_maintenance: '',
	},
	collection: {
		machine_logo: { title: $t('machine.infos.logo'), data: 'system', name: 'LOGO', list: false, },
		machine_ico: { title: $t('machine.infos.icon'), data: 'system', name: 'icon', list: false },
		stop_sell: { title: $t('machine.infos.closed'), data: 'system', name: 'sell', list: false },
		machine_maintenance: { title: $t('machine.infos.mainten'), data: 'system', name: 'maintenance', list: false },
		remote_maintenance: { title: $t('machine.infos.remote'), data: 'system', name: 'remotemaintenance', list: false },
	}
})
let getsystem = () => {
	data.mtloading = true
	getconfig({ config_name: 'systemInfo' }).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			let content = JSON.parse(res.data.config_content)
			for (let key in data.config) {
				data.config[key] = res.data[key]
			}
			for (let key in content) {
				data.form[key] = content[key]
			}
			data.config.csr_id = res.data.creator
		}
	})
}

// 保存
let onSubmit = () => {
	let datas = {
		config_name: data.config.config_name,
		config_content: JSON.stringify(data.form),
		config_switch: data.config.config_switch,
		csr_id: data.config.csr_id
	}
	if (data.config.config_id != 0) {
		datas.config_id = data.config.config_id
	}
	dtasObj.value = datas
	emit('infoData', datas)
}

// 取消
let onCancel = () => {
	getsystem()
}

// 上传返回
let expose = (e) => {
	if (e.status == 200) {
		for (const key in data.collection) {
			if (e.name == data.collection[key].name) {
				data.form[key] = e.file.response.data
				return
			}
		}
	}
}

getsystem()

// 暴露方法 方便父组件调用
defineExpose({
	getsystem
})

</script>
<style lang="scss" scoped>
.input_width {
	width: 600px;
}
</style>